<!---总览数据页面-->
<template>
  <div class="ele-body ele-body-card">
    <a-row>
      <a-col :span="12" class="block-space-right">
        <a-card title="设备信息" class="card-width">
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="当前时间">{{data.deviceTime}}</a-descriptions-item>
            <a-descriptions-item label="控制柜ID">{{data.recordId}}(0x{{parseInt(data.recordId).toString(16)}}) &nbsp;&nbsp;&nbsp;[卡号:{{slurryscraper.ccid}}]</a-descriptions-item>
            <a-descriptions-item label="设备号">{{data.recordNo}}</a-descriptions-item>
            <a-descriptions-item label="牛舍名称">{{data.oxtallName}}</a-descriptions-item>
            <a-descriptions-item label="运行模式">{{slurryscraper.runModel == 1 ? "计次模式" : (slurryscraper.runModel == 2 ? "时间区间模式" : "未知")}}</a-descriptions-item>
            <a-descriptions-item label="防冻模式">{{slurryscraper.antifreezeMode == 1 ? "关闭" : (slurryscraper.antifreezeMode == 2 ? "手动开启" : "根据温度自动启停")}}</a-descriptions-item>
            <a-descriptions-item label="转向依据">{{slurryscraper.sourceSwitch == 1 ? "堵转电流" : "堵转电流/行程开关"}}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="12" class="block-space-right">
        <!-- 右边统计快 -->
        <a-card title="实时数据" class="card-width">
          <a-row :gutter="8">
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="空气温度"
                  :value="slurryscraper.temperature"
                  :precision="1"
                  suffix="℃"
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="空气湿度%RH"
                  :value="slurryscraper.humidity"
                  :precision="1"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="实时功率KW"
                  :value="(slurryscraper.activePower * 0.001).toFixed(3)"
                  :precision="3"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="当日清粪次数"
                  :value="slurryscraper.todayCalenNum"
                  :precision="0"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
          </a-row>
          <a-row :gutter="8" >
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="运行方向"
                  :value="slurryscraper.direction == 1 ? '正向' : (slurryscraper.direction == 2 ? '反向' : '未知')"
                  :precision="0"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="运行转速"
                  :value="slurryscraper.speed"
                  :precision="0"
                  suffix="hz"
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="正向位置"
                  :value="slurryscraper.forwardPosition"
                  :precision="0"
                  suffix="%"
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="反向位置"
                  :value="slurryscraper.reversePosition"
                  :precision="0"
                  suffix="%"
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
          </a-row>
          <a-row :gutter="8" >
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="总清粪次数"
                  :value="slurryscraper.historyCalenNum"
                  :precision="0"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="昨日刮粪次数"
                  :value="slurryscraper.yesterdayCalenNum"
                  :precision="0"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="总用电量"
                  :value="(slurryscraper.consumptionTotal * 0.01).toFixed(2)"
                  :precision="2"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="6">
              <a-card>
                <a-statistic
                  title="昨日用电量"
                  :value="(slurryscraper.yesterdayConsumption * 0.01).toFixed(2)"
                  :precision="2"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <a-divider orientation="left">电流数据</a-divider>
    <a-row :gutter="16">
      <a-col :span="4">
        <a-card>
          <a-statistic
            title="A相电流"
            :value="slurryscraper.acurrentNum	"
            :precision="0"
            suffix="A"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          />
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic
            title="B相电流"
            :value="slurryscraper.bcurrentNum"
            :precision="0"
            suffix="A"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          />
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic
            title="C相电流"
            :value="slurryscraper.ccurrentNum"
            :precision="0"
            suffix="A"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          />
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic
            title="A相电压"
            :value="slurryscraper.avoltageNum"
            :precision="0"
            suffix="V"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          />
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic
            title="B相电压"
            :value="slurryscraper.bvoltageNum"
            :precision="0"
            suffix="V"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          />
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card>
          <a-statistic
            title="C相电压"
            :value="slurryscraper.cvoltageNum"
            :precision="0"
            suffix="V"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          />
        </a-card>
      </a-col>
    </a-row>

    <a-divider orientation="left">设备状态</a-divider>
    <a-list :grid="{ gutter: 16, column: 6 }" :data-source="switchData1">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-card :title="item.title">
            <a-switch checked-children="接通" un-checked-children="断开" :checked="item.checked" />
          </a-card>
        </a-list-item>
      </template>
    </a-list>

    <a-list :grid="{ gutter: 16, column: 6 }" :data-source="switchData2">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-card :title="item.title">
            <a-switch checked-children="有效" un-checked-children="无效" :checked="item.checked" />
          </a-card>
        </a-list-item>
      </template>
    </a-list>


    <!-- 报表统计 -->
    <a-row :gutter="16">
      <a-col :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :bordered="false"
          title="最近4小时温湿度情况"
          :body-style="{padding: '16px 6px 0 0'}">
          <template #extra>
            <a-space size="middle" class="analysis-tabs-extra">
              <a-radio-group v-model:value="chartWhere.dateType" @change="selectDataType">
                <a-radio-button :value="1">4小时</a-radio-button>
                <a-radio-button :value="2">8小时</a-radio-button>
                <a-radio-button :value="3">12小时</a-radio-button>
                <a-radio-button :value="4">1天内</a-radio-button>
                <a-radio-button :value="5">2天内</a-radio-button>
              </a-radio-group>
            </a-space>
          </template>
          <v-chart
            ref="temperatureHumidityChart"
            style="height: 362px;"
            :option="temperatureHumidityChartOption"/>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { provide } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import 'echarts-wordcloud';
import { ChartTheme } from 'ele-admin-pro';
import moment from 'moment'
import {DeviceSlurryScraperApi} from "@/api/property/slurryscraper/DeviceSlurryScraperApi";
import {DeviceSlurryScraperDataApi} from "@/api/property/slurryscraper/DeviceSlurryScraperDataApi";

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);

provide(THEME_KEY, ChartTheme);

export default {
  name: 'DeviceSlurryscraperMonitor',
  components: {
    VChart,
  },
  props: {
    data: Object
  },
  data() {
    return {
      // 最近1小时温度情况
      temperatureHumidityData: [],
      slurryscraper : {},
      loadTimer:null, //定义一个刷新的timer
      loadDetailTimer : null,
      switchData1 : [
        {
          title: '正转接触器',
          checked : false
        },
        {
          title: '反转接触器',
          checked : false
        },
        {
          title: '正转热继电器',
          checked : false
        },
        {
          title: '反转热继电器',
          checked : false
        },
        {
          title: '正向行程开关',
          checked : false
        },
        {
          title: '反向行程开关',
          checked : false
        }
      ],
      switchData2 : [
        {
          title: '控制器正转输出',
          checked : false
        },
        {
          title: '控制器反转输出',
          checked: false
        },
        {
          title: '旋钮正转自动运行',
          checked: false
        },
        {
          title: '旋钮反转自动运行',
          checked: false
        },
        {
          title: '旋钮正转手动运行',
          checked: false
        },
        {
          title: '旋钮反转手动运行',
          checked: false
        }
      ],
      chartWhere : {
        "dateType" : 1,
        "searchBeginTime" : moment().subtract(4, 'h').format('YYYY-MM-DD HH:mm:ss'),
      }
    };
  },
  mounted() {
    this.getTemperatureHumidityData();
    this.getDetail();
    this.loadTimer = setInterval(this.getTemperatureHumidityData, 30000);
    this.loadDetailTimer = setInterval(this.getDetail, 30000);
  },
  beforeUnmount() {
    clearInterval(this.loadTimer);
    clearInterval(this.loadDetailTimer);
  },
  computed: {
    // 最近1小时温度情况折线图配置
    temperatureHumidityChartOption() {
      /*if (!this.visitHourData.length) {
        return null;
      }*/
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['温度', '湿度', 'THI'],
          right: 20
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.temperatureHumidityData.map(d => d.time)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.temperature)
          },
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.humidity)
          },
          {
            name: 'THI',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: this.temperatureHumidityData.map(d => d.thi)
          }
        ]
      }
    }
  },
  methods: {
    getDetail() {
      let that = this;
      DeviceSlurryScraperApi.detailByRecord(this.data.recordId).then(result => {
        that.slurryscraper = result || {};
        if (that.slurryscraper) {
          this.switchData1[0].checked = that.slurryscraper.forwardJiecuStatus == 1 ? true : false;
          this.switchData1[1].checked = that.slurryscraper.reverseJiecuStatus == 1 ? true : false
          this.switchData1[2].checked = that.slurryscraper.forwardHotjiecuStatus == 1 ? true : false
          this.switchData1[3].checked = that.slurryscraper.reverseHotjiecuStatus == 1 ? true : false
          this.switchData1[4].checked = that.slurryscraper.forwardTripStatus == 1 ? true : false
          this.switchData1[5].checked = that.slurryscraper.reverseTripStatus == 1 ? true : false
          this.switchData2[0].checked = that.slurryscraper.forwardOutputStatus == 1 ? true : false
          this.switchData2[1].checked = that.slurryscraper.reverseOutputStatus == 1 ? true : false
          this.switchData2[2].checked = that.slurryscraper.forwardAutorunStatus == 1 ? true : false
          this.switchData2[3].checked = that.slurryscraper.reverseAutorunStatus == 1 ? true : false
          this.switchData2[4].checked = that.slurryscraper.forwardHandrunStatus == 1 ? true : false
          this.switchData2[5].checked = that.slurryscraper.reverseHandrunStatus == 1 ? true : false
        }
      });
    },
    selectDataType () {
      clearInterval(this.loadTimer);
      if (this.chartWhere.dateType == 1) {
        this.chartWhere.searchBeginTime = moment().subtract(4, 'h').format('YYYY-MM-DD HH:mm:ss');
      } else if (this.chartWhere.dateType == 2) {
        this.chartWhere.searchBeginTime = moment().subtract(5, 'h').format('YYYY-MM-DD HH:mm:ss');
      } else if (this.chartWhere.dateType == 3) {
        this.chartWhere.searchBeginTime = moment().subtract(12, 'h').format('YYYY-MM-DD HH:mm:ss');
      } else if (this.chartWhere.dateType == 4) {
        this.chartWhere.searchBeginTime = moment().subtract(24, 'h').format('YYYY-MM-DD HH:mm:ss');
      } else if (this.chartWhere.dateType == 5) {
        this.chartWhere.searchBeginTime = moment().subtract(48, 'h').format('YYYY-MM-DD HH:mm:ss');
      }
      this.getTemperatureHumidityData();
      this.loadTimer = setInterval(this.getTemperatureHumidityData, 30000);
    },
    getTemperatureHumidityData(){
      let params = {
        searchBeginTime : this.chartWhere.searchBeginTime,
        searchEndTime : moment().format('YYYY-MM-DD HH:mm:ss'),
        recordId : this.data.recordId,
        orderBy : "create_time",
        sortBy : "asc"
      };
      DeviceSlurryScraperDataApi.list(params).then(list => {
        let _temperatureHumidityData = [];
        if (list && list.length > 0) {
          console.log(list);
          list.forEach(function(item) {
            let formatItem = {
              time : item.createTime.substr(0, 16),
              temperature : item.temperature,
              humidity : item.humidity,
              thi : item.thi
            };
            _temperatureHumidityData.push(formatItem);
          });
        } else {
          _temperatureHumidityData.push({
            time : moment().subtract(20, 'minute').format('YYYY-MM-DD HH:mm'),
            temperature : 0,
            humidity : 0,
            thi : 0,
          });
          _temperatureHumidityData.push({
            time : moment().subtract(10, 'minute').format('YYYY-MM-DD HH:mm'),
            temperature : 0,
            humidity : 0,
            thi : 0
          });
          _temperatureHumidityData.push({
            time : moment().subtract(5, 'minute').format('YYYY-MM-DD HH:mm'),
            temperature : 0,
            humidity : 0,
            thi : 0,
          });
        }
        this.temperatureHumidityData = _temperatureHumidityData;
      });
    }
  },
  activated() {
    ['temperatureHumidityChart'].forEach((name) => {
      this.$refs[name].resize();
    });
  }
};
</script>
<style scoped>
.block-space-top {
  /*上右下左*/
  padding: 10px 0 0 0;
}

.block-space-right {
  padding: 0 5px 0 0;
}

.block-space-left {
  padding: 0 0 0 5px;
}

.card-width {
  width: 100%;
}
@media screen and (max-width: 880px) {
  .analysis-tabs-extra {
    display: none;
  }
}
</style>
